<template>
	<s-layout navbar="custom">
		<view class="top">
			<SimpleCalendar @day-click="handleDayClick" />

			<s-empty v-if="state.todaylist.length === 0" icon="/static/goods-empty.png" paddingTop="0" text="暂无直播">
			</s-empty>
			<view class="ss-m-t-10 zhibo" v-if="state.todaylist.length > 0" v-for="item in state.todaylist"
				:key="item.id">
				<view class="icon">
					<button class="ss-reset-button zhibo-btn"
						v-if="item.zhibostatus=='before' || item.zhibostatus=='beforeinOnehour'">
						待直播
					</button>
					<button class="ss-reset-button zhibo-btn" @tap="navigatorToVideo(item)"
						v-else-if="item.zhibostatus=='zhibozhong'">
						直播中
					</button>
					<button class="ss-reset-button zhibo-btn" v-else-if="item.zhibostatus=='after'">
						已结束
					</button>
				</view>
				<view>
					<view class="course-title">{{item.lesson_name}}</view>
					<view class="course-msg"><span>{{item.start_time}}</span><span>{{item.teacher_name}}</span></view>
				</view>
			</view>

		</view>

		<!-- <view class="tiku-card">
			<view class="img" @tap="sheep.$router.go('/pages/tiku/index')"><image class="activity-left-image" src="/static/images/tiku1.png"  width="100%" mode="widthFix"/></view>
			<view class="img" style="margin-left:2%;"><image class="activity-left-image" src="/static/images/tiku2.png"  width="100%" mode="widthFix"/></view>
		</view> -->

		<view class="goodsinfo">
			<view class="row firsttext">
				<view><uni-icons custom-prefix="iconfont" type="icon-lishidingdan" size="15"
						style="color:#666;"></uni-icons><span style="margin-left:8px;">上次学到</span></view>
				<view @tap="sheep.$router.go('/pages/user/course/studyreport')">观看历史 <uni-icons custom-prefix="iconfont"
						type="icon-right-arrow-1" size="13" style="color:#999;"></uni-icons></view>
			</view>
			<view class="row secondtext" @tap="navigatorToVideo(state.learnrecord)">
				<view class="title">{{state.learnrecord.lesson_name}}</view>
				<view class="item-shiting ss-reset-button">已看{{state.learnrecord.learnPercent}}%</view>
			</view>
		</view>

		<view class="course-content">
			<view class="ss-flex ss-col-center ss-p-l-20">
				<view class="line"></view>
				<view class="title ss-m-l-20 ss-m-r-10">全部课程</view>
				<!--        <view class="des">({{ state.total }})</view>-->
			</view>

			<view v-if="state.orderList.length > 0">
				<view class="bg-white order-list-card-box ss-r-10 ss-m-t-14 ss-m-20" v-for="item in state.orderList"
					:key="item.id" @tap="onOpenDetail(item.id)">
					<view class="ss-order-card-warp ss-flex ss-col-stretch bg-white">
						<!-- <view class="img-box ss-m-r-24">
							<image class="order-img" :src="sheep.$url.cdn(item.goods_image)" mode="widthFix"
								width="100%"></image>
						</view> -->
						<view class="box-right ss-flex-col ss-row-between">
							<view class="title-text ss-line-2">{{ item.goods_title }}</view>
							<view class="ss-m-t-10 youxiaoqi" style="padding-left:0px;">
								<view style="display: inline-block;" v-if="item.goods_sku_text !=''">
									{{item.goods_sku_text}}
								</view>
							</view>
						</view>
					</view>
					<view class="coursebottom">
						<view class="left">
							<view class="youxiaoqi">听课有效期至
								{{sheep.$helper.timeFormat(item.deadline_time, 'yyyy-mm-dd')}}</view>
						</view>
						<view class="right">
							<button class="ss-reset-button learn-btn ui-Shadow-Main">
								去学习
							</button>
						</view>
					</view>
				</view>
			</view>
		</view>
	</s-layout>
</template>


<script setup>
	import {
		computed,
		reactive
	} from 'vue';
	import {
		onLoad,
		onReachBottom,
		onPullDownRefresh
	} from '@dcloudio/uni-app';
	import {
		formatOrderColor,
		formatGoodsSwiper
	} from '@/sheep/hooks/useGoods';
	import sheep from '@/sheep';
	import _ from 'lodash';
	import {
		isEmpty
	} from 'lodash';
	import SimpleCalendar from '@/sheep/components/calendar/SimpleCalendar.vue';


	// 数据
	const state = reactive({
		today: '',
		orderList: [],
		learnrecord: [],
		todaylist: [],
	});

	onLoad(async (options) => {
		state.today = getCurrentDateFormatted();
		getTodayLive();
		getOrderList();
		getLearnRecord();
	});

	function handleDayClick(date) {
		console.log('在父组件中接收到的点击日期:', date.toDateString());
		state.today = parseAndFormatDate(date.toDateString());
		getTodayLive();
	}

	async function getTodayLive() {
		let res = await sheep.$api.course.getTodayLiveCourse({
			today: state.today,
		});
		if (res.code === 1) {
			state.todaylist = res.data;
		}
	}

	// 获取订单列表
	async function getOrderList() {
		state.loadStatus = 'loading';
		let res = await sheep.$api.course.getBzspByUser();
		state.error = res.error;
		if (res.code === 1) {
			state.orderList = res.data;
		}
	}

	// 获取最近学习记录
	async function getLearnRecord() {
		state.loadStatus = 'loading';
		let res = await sheep.$api.course.getLearnRecord({});
		state.error = res.error;
		if (res.code === 1) {
			console.log(res)
			state.learnrecord = res.data;
		}
	}

	// 订单详情
	function onOpenDetail(orderitemid) {
		sheep.$router.go('/pages/study/bzdetail', {
			'id': orderitemid,
		});
	}

	//跳转观看页面
	function navigatorToVideo(lesson) {
		console.log(lesson);
		if (lesson.content_type == "zhibo") {
			if (lesson.ccRoomId != "" && lesson.ccRecordId == "") {
				console.log(1);
				sheep.$router.go('/pages/course/zhibo', {
					id: lesson.goods_id,
					lessonId: lesson.id,
					title: lesson.lesson_name
				})
			} else if (lesson.ccRoomId != "" && lesson.ccRecordId != "") {
				console.log(2);
				sheep.$router.go('/pages/course/huifang', {
					id: lesson.goods_id,
					title: lesson.lesson_name,
					recordId: lesson.id
				})
			}
		} else if (lesson.content_type == "lubo") {
			console.log(3);
			sheep.$router.go('/pages/course/lubo', {
				id: lesson.goods_id,
				recordId: lesson.lesson_id,
				title: lesson.lesson_name
			})
		}
	}

	function getCurrentDateFormatted() {
		const now = new Date();
		const year = now.getFullYear();
		const month = String(now.getMonth() + 1).padStart(2, '0'); // 月份从0开始计数，所以要加1
		const day = String(now.getDate()).padStart(2, '0'); // 确保日期是两位数
		return `${year}-${month}-${day}`;
	}

	function parseAndFormatDate(dateStr) {
		// 创建一个映射对象，用于将月份缩写转换为数字
		const monthMap = {
			Jan: '01',
			Feb: '02',
			Mar: '03',
			Apr: '04',
			May: '05',
			Jun: '06',
			Jul: '07',
			Aug: '08',
			Sep: '09',
			Oct: '10',
			Nov: '11',
			Dec: '12'
		};
		// 提取日期部分
		const [dayOfWeek, month, day, year] = dateStr.split(' ');
		const monthNum = monthMap[month];
		return `${year}-${monthNum}-${String(day).padStart(2, '0')}`;
	}
</script>

<style lang="scss" scoped>
	@import "@/static/iconfont/iconfont.css";

	.top {
		background-color: #FFF;
		margin-bottom: 10px;
		padding-bottom: 12px;
		min-height: 218px;
		margin: 12px;
		border-radius: 14px;


		.zhibo {
			display: flex;
			padding: 8px;
		}

		.zhibo .icon {
			width: 66px;
			margin-top: 4px;
		}

		.course-title {
			line-height: 20px;
			padding-bottom: 5px;
		}

		.course-msg {
			color: #999999;
			font-size: 24rpx;
			margin-top: 4px;
		}

		.course-msg span {
			border: 1px solid #e1e1e1;
			margin-right: 8px;
			font-size: 20rpx;
			padding: 2px 4px;
			border-radius: 3px;
		}
	}

	.zhibo-btn {
		width: 100rpx;
		height: 30rpx;
		font-size: 22rpx;
		border-radius: 10rpx;
		background: #eeeeee;
		color: #888888;
	}

	.tiku-card {
		margin: 10px 12px;
		display: flex;
	}

	.tiku-card .img {
		width: 48%;
	}

	.tiku-card .img uni-image {
		width: 100%
	}

	.goodsinfo {
		height: 120px;
		border-radius: 14px;
		margin: 12px;
		padding: 20px 15px 5px 15px;
		box-sizing: border-box;
		background-color: #FFFFFF;

		.row {
			display: flex;
			justify-content: space-between;
			margin-bottom: 22px;
			align-items: center;
		}

		.firsttext {
			font-size: 24rpx;
			color: #999;
		}

		.item-shiting {
			width: 120rpx;
			height: 40rpx;
			font-weight: 500;
			font-size: 22rpx;
			border-radius: 40rpx;
			background: linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
			color: $white;

		}
	}

	.youxiaoqi {
		font-size: 24rpx;
		color: #999999;
		padding-left: 10px;
	}

	.youxiaoqi span {
		color: #999999;
		font-size: 24rpx;
	}

	.ss-row-right {
		justify-content: flex-start;
	}

	.course-content {
		background-color: #FFFFFF;
		border-top-left-radius: 14px;
		border-top-right-radius: 14px;
		padding-top: 10px;
		padding-bottom: 10px;

		.line {
			width: 6rpx;
			height: 30rpx;
			background: linear-gradient(180deg, var(--ui-BG-Main) 0%, var(--ui-BG-Main-gradient) 100%);
			border-radius: 3rpx;
		}

		.title {
			font-size: 30rpx;
			font-weight: bold;
			line-height: normal;
		}


	}

	.order-list-card-box {
		margin: 12px;
		border: 1px solid #eeeeee;
		padding: 10px 0px;
	}

	.coursebottom {
		display: flex;
		justify-content: space-between;

		.left {
			width: 70%;

		}

		.right {
			width: 25%;
			display: flex;
			justify-content: center;
			/* 水平居中 */
			align-items: center;
			/* 垂直居中 */
		}

		.courseinfo {
			font-size: 12px;
			color: #666666;
			padding: 20rpx;
		}

		.learn-btn {
			width: 114rpx;
			height: 40rpx;
			font-weight: 500;
			font-size: 24rpx;
			border-radius: 40rpx;
			background: linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
			color: $white;
		}
	}


	.ss-order-card-warp {
		padding: 20rpx;

		.img-box {
			width: 184rpx;
			height: auto;
			border-radius: 10rpx;
			overflow: hidden;

			.order-img {
				width: 184rpx;
				height: auto;
			}
		}

		.box-right {
			flex: 1;
			position: relative;
		}

		.title-text {
			font-size: 28rpx;
			font-weight: 500;
			line-height: 40rpx;
		}
	}

	:deep(.uni-tooltip-popup) {
		background: var(--ui-BG);
	}

	.warning-color {
		color: #faad14;
	}

	.danger-color {
		color: #ff3000;
	}

	.success-color {
		color: #52c41a;
	}

	.info-color {
		color: #999999;
	}
</style>